<!-- 司机管理 -->
<template>
  <el-form ref="tableFormRef" :model="tableForm" inline class="tableForm">

<!--    <el-form-item label="所属小组：" prop="groupOf">-->
<!--      <el-select v-model="tableForm.queryRo.groupOf" clearable style="width: 136px">-->
<!--&lt;!&ndash;         <el-option&ndash;&gt;-->
<!--&lt;!&ndash;            v-for="item in groupOf"&ndash;&gt;-->
<!--&lt;!&ndash;            :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;            :label="item.label"&ndash;&gt;-->
<!--&lt;!&ndash;            :value="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;            placeholder="请选择运营组"&ndash;&gt;-->
<!--&lt;!&ndash;         />&ndash;&gt;-->
<!--        <el-option label="区域一" value="shanghai"></el-option>-->
<!--        <el-option label="区域二" value="beijing"></el-option>-->
<!--      </el-select>-->

<!--      <el-input-->
<!--          v-model="tableForm.queryRo.groupOf"-->
<!--          style="width: 150px"-->
<!--          clearable-->
<!--          placeholder="请输入运营组"-->
<!--      />-->
<!--    </el-form-item>-->
    <el-form-item label="姓名：" prop="name">
      <el-input
          v-model="tableForm.queryRo.name"
          style="width: 150px"
          clearable
          placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item>
      <el-radio-group v-model="tableForm.queryRo.driverType" @change="radioChange">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label= 0>灵活用工</el-radio-button>
        <el-radio-button label= 1>固定司机</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="联系电话：" prop="phone">
      <el-input
          v-model="tableForm.queryRo.phone"
          style="width: 150px"
          clearable
          placeholder="请输入联系电话"
      />
    </el-form-item>
    <el-form-item label="创建时间：" >
      <el-date-picker
        v-model="createTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        align="right">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="修改时间：" >
      <el-date-picker
          v-model="updateTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="name" label="司机姓名" align="center" />
    <el-table-column prop="phone" label="司机电话" align="center" />
    <el-table-column prop="sex" label="性别" align="center" >
      <template #default="scope">
        <span >{{ sexNum(scope.row.sex)}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="driverType" label="司机类别" align="center" >
      <template #default="scope">
        <span >{{ driverTypeNum(scope.row.driverType)}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" align="center" />
    <el-table-column prop="createTime" label="创建时间" align="center" />
    <el-table-column prop="updateTime" label="修改时间" align="center" />
    <el-table-column prop="amt" label="营收余额" align="center" />
    <el-table-column prop="orderNumb" label="订单量" align="center" />
    <el-table-column prop="score" label="评分" align="center" />
    <el-table-column prop="type" label="车辆类型" align="center" />
    <el-table-column prop="depositAmt" label="押金" align="center" />
    <el-table-column prop="bankCardNo" label="银行卡号" align="center" />
    <el-table-column prop="bankName" label="开户行" align="center" />
    <el-table-column prop="accid" label="网易云信唯一标志" align="center" />
    <el-table-column prop="verificationCode" label="验证码" align="center" />
    <el-table-column prop="tokenId" label="网易云信密钥" align="center" />
    <el-table-column prop="vehicleNo" label="车牌号" align="center" />
    <el-table-column prop="bmsNo" label="设备唯一编号" align="center" />
    <el-table-column prop="status" label="司机的状态" align="center" >
      <template #default="scope">
        <span >{{ statusNum(scope.row.status)}}</span>
      </template>
    </el-table-column>

    <el-table-column prop="monthMoney" label="月结金额" align="center" />
    <el-table-column prop="totalMoney" label="总结算金额" align="center" />

<!--    <el-table-column  label="是否禁用" align="center" >-->
<!--        <template #default="scope">-->
<!--          <el-switch  :before-change="beforeChange" v-model="scope.row.isInterdict"   style="&#45;&#45;el-switch-on-color: #13ce66" />-->
<!--        </template>-->
<!--     </el-table-column>-->
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link type="danger" size="small" @click="deleteUpdate(scope.row)">删除</el-button>
		<el-button link type="primary" size="small" @click="downImg(scope.row)">司机二维码</el-button>
        <el-button link type="primary"  @click="openDialog(scope.row)" >查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <div id="qrCodeUrl" style="width:200px;height: 200px;background-color: red;position: fixed;left: -1000px;"></div>
 
  
  <footer class="pagination">
    <el-pagination
      v-model:currentPage="tableForm.current"
      v-model:page-size="tableForm.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>


  <DriverDetailDialog
      v-model:show="showDialog"
      :detail="detail"
  ></DriverDetailDialog>
</template>

<script lang="ts" setup>
import {ElMessage, ElMessageBox} from 'element-plus';
import {ref, reactive, onMounted} from 'vue'
import DriverDetailDialog from './components/DriverDetailDialog.vue'
import api from '@/api/apis/driverApi'

import QRCode from 'qrcodejs2-fix'

//改变筛选状态
const radioChange=()=>{
  tableForm.current = 1
  getTableList()
}

const deleteUpdate = (row)=>{
  ElMessageBox.confirm(
      '您确定要删除该站点吗?',
      '注意',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let res = await api.deleteUpdateById(row.id)
        console.log(res)
        if(res.data.code == 200){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getTableList()
        }

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}

const downImg = (row)=>{
	document.getElementById("qrCodeUrl").innerHTML = "";
	let qrCodeUrl= new QRCode("qrCodeUrl", {
		width: 200,
		height: 200,
		text: `www.baidu.com?workerName=${row.name}&vehicleNo=${row.vehicleNo}&workerAccid=${row.accid}&workerId=${row.id}`,
		colorDark: "#409EFF",
		colorLight: "#fff"
	})
	
	setTimeout(()=>{
		var img = document.getElementById('qrCodeUrl').getElementsByTagName('img')[0];
		let a = document.createElement("a");
		a.href = img.src      
		a.setAttribute('download', row.name+'.png')
		a.click()
	},500)
}

const statusNum = (value: number) => {
  let obj: any = {
    '00': '接单中',
    '01': '休息中',
    '02': '工作中',
  }
  return obj[value]
}

const sexNum = (value: number) => {
  let obj: any = {
    null: '未知',
    '1': '男',
    '0': '女',
  }
  return obj[value]
}

const driverTypeNum = (value: number) => {
  let obj: any = {
    1: '固定司机',
    0: '灵活用工',
  }
  return obj[value]
}

const tableForm = reactive({
  queryRo: {
    createTime:"",
    updateTime:"",
    name:"",
    phone:"",
    driverType:"",
    // groupOf:"",
  },
  current: 1,
  pageSize: 20,
  searchCount: true
})
const time=ref<any>([])
const createTime=ref<any>('')
const updateTime=ref<any>('')
//总数
const total = ref(0)
//搜索
const search = () => {
  tableForm.current = 1
  getTableList()
}

//表格数据
const tableList = ref([])

//加载
const loading = ref(false)
onMounted(()=>{
  getTableList()
})

//弹框开关
const showDialog = ref(false)
//详情id
const detail = ref()
//打开详情弹框
const openDialog = (val: string) => {
  detail.value = val
  showDialog.value = true
}

//获取表格数据
const getTableList = async () => {
  loading.value = true
  try {
    let obj = { ...tableForm }
    obj.queryRo.createTime =createTime.value?createTime.value:undefined
    obj.queryRo.updateTime =updateTime.value?updateTime.value:undefined
    let {data} = await api.driverPage(obj)
    tableList.value = data.data.rows
    total.value= Number(data.data.total)
  } catch (error) {
    loading.value = false
  }
  loading.value = false
}
//改变每页条数
const handleSizeChange = (val: number) => {
  tableForm.current = 1
  tableForm.pageSize = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  tableForm.current = val
  getTableList()
}

//禁用
const beforeChange = () => {
  // if (row.isInterdict
  //
  // )
  return new Promise((resolve) => {
  ElMessageBox.confirm('是否禁用该司机?', '操作确认', {
    type: 'warning',
  })
    .then(() => {
      return resolve(true)
    })
    .catch(() => {})
  })
}

const sexList =[
  {name:"出车中",value:""},
  {name:"男",value:1},
  {name:"女",value:0},
]


</script>

<style scoped lang="scss">
footer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.rightBox{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    justify-content: space-between;
  }
  .avatarBox{
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  .my_card {
    border: 1px solid rgba(220, 221, 221, 1);
    border-radius: 10px;
    // padding: 13px 0;
    margin-bottom: 10px;
    .header {
      color: #101010;
      font-size: 16px;
      border-bottom: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      font-weight: 600;
    }
    .flexBetween {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
      justify-content: space-between;
      .leftTitle {
        width: 70px;
        display: inline-block;
      }
    }
    .price {
      display: inline-block;
      width: 30px;
    }
    .fontBold {
      font-weight: bold;
      color: #333;
      font-size: 15px;
    }
    .elrow {
      // text-align: right;
      border-top: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      .title {
        font-weight: 600;
        color: #333;
        text-align: left;
      }

      .flexBox {
        display: flex;
        align-items: center;
        p {
          margin: 0 10px;
        }
        .remark {
          color: #a7a7b3;
        }
        .el-icon {
          margin-right: 5px;
        }
      }
      .el-col {
        margin-bottom: 10px;
      }
    }
    .elrow:nth-child(2) {
      border-top: none !important;
    }
    .operate {
      color: #409eff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
</style>
